<template>
    <view class="bgcolor">
        <view>
            <form @submit="formSubmit" @reset="formReset">
				<!-- 活动名称 -->
				<view class="cu-form-group margin-top">
					<view class="title">活动名称</view>
					<input v-model="activityName" placeholder="请输入活动的名称" name="input"></input>
				</view>
				
				<!-- 活动日期 -->
				<view class="cu-form-group">
					<view class="title">日期选择</view>
					<picker mode="date" :value="date" :start="date2" end="2099-09-01" @change="DateChange">
						<view class="picker">
							{{date}}
						</view>
					</picker>
				</view>
				
				<!-- 性质 -->
				<view class="cu-form-group">
					<view class="title">分类选择</view>
					<picker mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :value="multiIndex" :range="multiArray">
						<view class="picker">
							{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
						</view>
					</picker>
				</view>
				
				<!-- 联系人 -->
				<view class="cu-form-group margin-top">
					<view class="title">联系人</view>
					<input v-model="userName" placeholder="姓名" name="input"></input>
				</view>
				
				<!-- 联系电话 -->
				<view class="cu-form-group margin-top">
					<view class="title">联系方式</view>
					<input v-model="telNumber" placeholder="手机号码" name="input" type="number"></input>
				</view>
				
				<!-- 参与人数 -->
				<view class="cu-form-group margin-top">
					<view class="title">限制人数</view>
					<input v-model="limitNumber" placeholder="输入数字" name="input" type="number"></input>
				</view>
				
				<!-- 简介 -->
				<view class="cu-form-group margin-top">
					<textarea v-model="activityDesc" maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" placeholder="活动简介"></textarea>
				</view>
				
				<!-- 图片 -->
				<view class="cu-bar bg-white margin-top">
					<view class="action">
						图片上传
					</view>
					<view class="action">
						{{imgList.length}}/2
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub" style="justify-content: center;">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
						 <image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="imgList.length<2">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
            </form>
			<view style="background-color: #FFFFFF;">
				<button type="primary" plain="true" style="background-color: white;" @click="Submit">提交</button>
				<button type="primary" plain="true" style="background-color: white;margin-top: 10upx;" @click="clearform">重置</button>
			</view>
        </view>
		<view style="height: 60px;text-align: center;margin-top:20px;">
			<view style="line-height: 1.8;">
				CDIO-1组&copy;版权所有
			</view>
			<view style="line-height: 1.8;">
				<a style="text-decoration: none;color: #000000;" href="http://www.miit.gov.cn/">备案号:苏ICP备19058910号</a>
			</view>
		</view>
    </view>
</template>

<script>
	import uploadImage from '@/common/ossutil/uploadFile.js';
    export default {
        data() {
            return {
				Authorization: '',
				isTele: true,
				modalName: null,
				activityName: '',
				date: '',
				date2: '',
				date3: '',
				activitykind: '',
				userName: '',
				telNumber: '',
				limitNumber: '',
				activityDesc: '',
				textareaAValue: '',
				imgList: [],
				imgUrl:[],
				img1:'',
				img2:'',
				fileType:[],
				file:[],
				ossUrl:[],
				multiSelector: '',
				multiArray: [
					['体育', '游戏','户外'],
					['球类', '田径', '棋类'],
					['羽毛球-7', '乒乓球-8', '排球-9', '篮球-10', '足球-11', '网球-12', '其他-13']
				],
				objectMultiArray: [
					[{
							id: 0,
							name: '体育'
						},
						{
							id: 1,
							name: '游戏'
						},
						{
							id: 3,
							name: '户外'
						}
					],
					[{
							id: 0,
							name: '球类'
						},
						{
							id: 1,
							name: '田径'
						},
						{
							id: 2,
							name: '棋类'
						}
					],
					[{
							id: 0,
							name: '羽毛球-7'
						},
						{
							id: 1,
							name: '乒乓球-8'
						},
						{
							id: 2,
							name: '排球-9'
						},
						{
							id: 3,
							name: '篮球-10'
						},
						{
							id: 4,
							name: '足球-11'
						},
						{
							id: 5,
							name: '网球-12'
						},
						{
							id: 6,
							name: '其他-13'
						}
					]
				],
				multiIndex: [0, 0, 0],
            }
        },
		onLoad() {
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var day = date.getDate();
			if (month < 10) {
			    month = "0" + month;
			}
			if (day < 10) {
			    day = "0" + day;
			}
			this.date = year + "-" + month + "-" + day;
			this.date2 = year + "-" + month + "-" + day;
		},
        methods: {
			DateChange(e) {
				console.log(e.detail.value)
				this.date3 = e.detail.value
				this.date = e.detail.value
			},
			sendoss(){
				for (let i = 0; i < this.file.length; i++) {
				    //显示消息提示框
				    uni.showLoading({
				      mask: true
				    })
				    uploadImage(this.file[i], 'activityImg/',
				        result => {
				        uni.hideLoading();
						this.imgUrl[i] = String(result)
				    }
				    )
				}
			},
			ChooseImage() {
				uni.chooseImage({
				    count: 2, // 默认最多一次选择9张图
				    sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
					sizeType: ['original'],
				    success: res=> {
						
						if(this.imgList.length == 0) {
							this.file[0] = res.tempFilePaths[0]
							this.fileType[0] = res.tempFiles[0]
						}else if(this.imgList.length == 1) {
							this.file[1] = res.tempFilePaths[0]
							this.fileType[1] = res.tempFiles[0]
						}
						this.sendoss()
						
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						}else {
							this.imgList = res.tempFilePaths
						}
				    }
				})
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '亲亲',
					content: '确定要删除？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgUrl.splice(e.currentTarget.dataset.index, 1)
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			checkNumber (e) {
				var num = e.detail.value
				if(!isNaN(num)) {
					this.isTele = true
				}else {
					this.isTele = false
				}
			},
			textareaAInput(e) {
				this.textareaAValue = e.detail.value
			},
			MultiChange(e) {
				this.multiIndex = e.detail.value
			},
			MultiColumnChange(e) {
				let data = {
					multiArray: this.multiArray,
					multiIndex: this.multiIndex
				};
				data.multiIndex[e.detail.column] = e.detail.value;
				switch (e.detail.column) {
					case 0:
						switch (data.multiIndex[0]) {
							case 0:
								data.multiArray[1] = ['球类', '田径', '棋类'];
								data.multiArray[2] = ['羽毛球-7', '乒乓球-8', '排球-9', '篮球-10', '足球-11', '网球-12', '其他-13'];
								break;
							case 1:
								data.multiArray[1] = ['手游', '端游', '桌游'];
								data.multiArray[2] = ['王者荣耀-22', '刺激战场-23','斗地主-24','其他-25'];
								break;
							case 2:
								data.multiArray[1] = ['拼车-32', '旅游-33', '登山-34','志愿活动-35'];
								data.multiArray[2] = ['', '','',''];
								break;
						}
						data.multiIndex[1] = 0;
						data.multiIndex[2] = 0;
						break;
					case 1:
						switch (data.multiIndex[0]) {
							case 0:
								switch (data.multiIndex[1]) {
									case 0:
										data.multiArray[2] = ['羽毛球-7', '乒乓球-8', '排球-9', '篮球-10', '足球-11', '网球-12', '其他-13'];
										break;
									case 1:
										data.multiArray[2] = ['跑步-14'];
										break;
									case 2:
										data.multiArray[2] = ['围棋-15', '象棋-16', '五子棋-17', '飞行棋-18'];
										break;
								}
								break;
							case 1:
								switch (data.multiIndex[1]) {
									case 0:
										data.multiArray[2] = ['王者荣耀-22', '刺激战场-23','斗地主-24','其他-25'];
										break;
									case 1:
										data.multiArray[2] = ['LOL-26', '炉石传说-27'];
										break;
									case 2:
										data.multiArray[2] = ['三国杀-28', '狼人杀-29', '剧本杀-30', '其他-31'];
										break;
								}
								break;
						}
						data.multiIndex[2] = 0;
						break;
				}
				this.multiArray = data.multiArray;
				this.multiIndex = data.multiIndex;
			},
			clearform() {
				this.activityName = ''
				this.userName = ''
				this.telNumber = ''
				this.limitNumber = ''
				this.activityDesc = ''
				this.file = []
				this.imgList = []
			},
			sendform(imgUrl) {
				let that = this
				//数据传后端
				let activityName = that.activityName
				let date =that.date3
				let activitykind = that.getKind(that.multiIndex)
				let userName = that.userName
				let telNumber = that.telNumber
				let limitNumber = that.limitNumber
				let activityDesc = that.activityDesc
					uni.request({
					    url: 'http://101.37.15.60:8080/activity/create',
						method:'POST',
					    data: {
					        activityDate: date+' 00:00:00',
							activityDesc: activityDesc,
							activityName: activityName,
							activityUser: userName,
							categoryId: activitykind,
							endTime: date+' 23:59:59',
							imgUrls: imgUrl,
							limitNumber: limitNumber,
							telNumber: telNumber
					    },
					    header: {
					        'Authorization': 'Bearer '+that.Authorization,
							'Content-Type': 'application/x-www-form-urlencoded'
					    },
					    success: (res) => {
					        if(res.data.message == 'SUCCESS') {
								that.tixing2('发布成功！')
								that.clearform()
							}else if(res.data.message == '未授权') {
								this.tixing('请先登录。')
								let that = this
								setTimeout(function() {
									that.tologin()
								},700)
							}
					    }
					});
			},
			Submit() {
				this.getCookies()
				if(this.Authorization == '' || this.Authorization == null) {
					this.tixing('请先登录。')
					let that = this
					setTimeout(function() {
						that.tologin()
					},700)
				}else {
					// this.testForm()
					if(this.testForm()) {
						this.sendform(this.imgUrl)
					}
				}
				
			},
			testForm() {
				let activityName = this.activityName
				let date =this.date3
				let activitykind = this.getKind(this.multiIndex)
				let userName = this.userName
				let telNumber = this.telNumber
				let limitNumber = this.limitNumber
				let activityDesc = this.activityDesc
				let img = this.file
				if(this.islength(activityName,4,15)){
					if(this.islength(userName,2,4)){
						if(this.islength(telNumber,11,11) && this.isTele ){
							if(this.islength(limitNumber,1,4)){
								if(this.islength(activityDesc,0,25)) {
									if(img.length >0) {
										if(date) {
											return true
										}else{
											this.tixing('请再次选择日期')
											return false
										}
									}else {
										this.tixing('别忘了还有图片啦')
										return false
									}
								}else {
									this.tixing('介绍是0-25字！')
									return false
								}
							}else {
								this.tixing('人太多了，少一点啦！')
								return false
							}
						}else {
							this.tixing('电话号码为11位！')
							return false
						}
					}else{
						this.tixing('联系人姓名2-4字！')
						return false
					}
				}else{
					this.tixing('活动名称4-15字！')
					return false
				}
				
			},
			getKind(activitykind) {
				if(activitykind[0]==0) {
					if(activitykind[1] == 0) {
						for(let b = 0;b<7;b++) {
							if(activitykind[2] == b) {
								return b+7
							}
						}
					}else if(activitykind[1] == 1) {
						return 14
					}else if(activitykind[1] == 2) {
						for(let b = 0;b<4;b++) {
							if(activitykind[2] == b) {
								return b+15
							}
						}
					}
				}else if(activitykind[0]==1) {
					if(activitykind[1] == 0) {
						for(let b = 0;b<4;b++) {
							if(activitykind[2] == b) {
								return b+22
							}
						}
					}else if(activitykind[1] == 1) {
						for(let b = 0;b<4;b++) {
							if(activitykind[2] == b) {
								return b+26
							}
						}
					}else if(activitykind[1] == 2) {
						for(let b = 0;b<4;b++) {
							if(activitykind[2] == b) {
								return b+28
							}
						}
					}
				}else if(activitykind[0]==2) {
					for(let a = 0;a<4;a++){
						if(activitykind[1] == a) {
							return a+32
						}
					}
				}
			},
			islength(word,min,max) {
				let a = word.toString()
				let len = a.length
				if(min == max) {
					if(len == min || len == max) {
						return true
					}else {
						return false
					}
				}else if(max>min) {
					if(len >= min && len <= max) {
						return true
					}else {
						return false
					}
				}
			},
			tixing(title) {
				uni.showToast({
					icon: 'none',
				    title: title,
				    duration: 1500
				});
			},
			tixing2(title) {
				uni.showToast({
				    title: title,
				    duration: 2000
				});
			},
			getCookies() {
			  if (document.cookie.length > 0) {
			    var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
			    for (var i = 0; i < arr.length; i++) {
			      var arr2 = arr[i].split("="); //再次切割
			      //判断查找相对应的值
			      if (arr2[0] == "Authorization") {
			        this.Authorization = arr2[1]; //保存到保存数据的地方
			      }
			    }
			  }
			},
			tologin() {
				uni.navigateTo({
					url: '../login/login',
				    success: res => {},
				    fail: () => {},
				    complete: () => {}
				});
			}
        }
    }
</script>

<style scoped>
    .uni-form-item .title {
        padding: 20rpx 0;
    }
	.bgcolor {
		background-color: #EEEEEE;
	}
	.cu-card.article>.cu-item .title {
		font-size: 30upx;
		font-weight: 900;
		color: #333333;
		line-height: 100upx;
		padding: 0 30upx;
	}
</style>